<template>
	<view class="shopping_search_main">
		<!-- 这里是页面主体内容区域 -->
		<view class="return_cancel" @click="returnPage">
			<uni-icons type="arrow-left" size="28"></uni-icons>
		</view>
		<view class="search-area">
			<uni-search-bar @clear="clearSearchKey" @confirm="search" v-model="searchValue" bg-color="#ffffff">
			</uni-search-bar>
		</view>

		<view class="search-operations" v-show="!isShowResult">
			<!-- 搜索历史 -->
			<view class="search_history_view" v-if="searchHistorys.length > 0">
				<view class="search_history_text_delete_icon">
					<view class="search_history_text">
						搜索历史
					</view>
					<view class="delete_icon" @click="deleteAllSearchHistory">
						<uni-icons type="trash" size="20" color="#8d8d8d"></uni-icons>
					</view>
				</view>
				<view class="search_history_contain">
					<view class="search_history_per" v-for="(item,index) in searchHistorys" :key="index"
						@click="clickSearchHistoryLabel(item)">
						<view class="history-text">
							{{item.name}}
						</view>
						<view class="deleteHistory" @click.stop="deleteByHistoryAidFunc(item)">
							<uni-icons type="closeempty" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<!-- 猜你想搜 -->
			<view class="guess_search_main" v-if="guessLists.length > 0">
				<view class="guess_search_text">
					猜你想搜
				</view>
				<view class="guess_per_contain">
					<view class="guess_goods_per" v-for="(item,index) in guessLists" :key="index">
						<view class="guess_good_name" @click="clickGuessItem(item)">
							{{item.name}}
						</view>
						<view class="guess_image">
							<image :src="item.guessItemImg" mode="aspectFill" class="guess_good_img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view class="search-result" v-show="isShowResult">
			<view class="result-empty" v-show="goods.length <= 0">
				<image src="@/static/image/empty_box.png" mode="aspectFill"></image>
				<view class="text-empty">
					对不起，没有搜索到该商品！
				</view>
			</view>
			<view class="result-non-empty" v-show="goods.length > 0">
				<view class="result-top-menu">
					<view class="result-menu-item" :class="{'active-menu': item.activeSelect}"
						v-for="(item,index) in sortTitles" :key="index" @click="clickMenu(item)">
						{{item.menuName}}
					</view>
				</view>
				<view class="result">
					<view class="result-item" v-for="item in goods" :key="item.goodAid" @click="toGoodsDetailPage(item)">
						<view class="good-image">
							<image :src="item.goodImg" mode="aspectFill"></image>
						</view>
						<view class="good-price">
							{{item.goodPrice}}
						</view>
						<view class="good-name">
							{{item.goodName}}
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		getSearchResults,
		getsearchHistAndGuessSearchList,
		deleteSearchByAid,
		addSearchHistory,
		deleteAllSearchHistory
	} from '@/request/goods';
	export default {
		data() {
			return {
				selectedMenuAid: 1,
				sortTitles: [{
						activeSelect: true,
						menuAid: 1,
						menuName: '综合',
					},
					{
						activeSelect: false,
						menuAid: 2,
						menuName: '销量',
					},
					{
						activeSelect: false,
						menuAid: 3,
						menuName: '价格',
					}
				], // 搜索结果顶部的菜单栏
				goods: [], // 根据关键字搜索出来的结果
				isShowResult: false, // 是否显示搜索结果
				searchValue: '',
				searchHistorys: ['背包', '挎包', '家具', '男士羽绒服', '舒肤佳'],
				guessLists: [{
						aid: 1,
						name: '运动',
						guessItemImg: '',
					},
					{
						aid: 2,
						name: '背包',
						guessItemImg: '',
					},
					{
						aid: 3,
						name: '咖啡',
						guessItemImg: ''
					},
					{
						aid: 4,
						name: '伞',
						guessItemImg: ''
					},
					{
						aid: 5,
						name: '休闲',
						guessItemImg: ''
					},
					{
						aid: 6,
						name: '上衣',
						guessItemImg: ''
					},
				]
			};
		},

		onLoad() {
			// 获取搜索历史和猜你想搜
			this.getsearchHistAndGuessSearchListFunc();

		},

		methods: {
			// 点击去商品详情页面
			toGoodsDetailPage(item){
				console.log(item);
				uni.navigateTo({
					url: `/pages/tabBar/extUI/shopping_topBar/goodDetail?goodAid=${item.goodAid}`
				})
			},

			// 获取搜索历史和猜你想搜
			getsearchHistAndGuessSearchListFunc() {
				getsearchHistAndGuessSearchList().then(res => {
					// console.log(res);
					this.searchHistorys = res.data.data.searchHistories;
					this.guessLists = res.data.data.guessSearchHis;
					this.addLabel();
				})
			},

			// 加上标签
			addLabel() {
				this.guessLists.forEach(item => {
					if (item.haveLabel) {
						item.guessItemImg = item.labelName === 'hot' ? '../../../../static/icons/HOT.png' :
							'../../../../static/icons/new.png'
					} else {
						item.guessItemImg = '';
					}
				})
				console.log(this.guessLists);
			},

			// 这里可以定义组件的方法
			search(res) {
				// console.log(res);
				this.searchValue = res.value.trim();
				this.sortTitles[0].activeSelect = true;
				this.sortTitles[1].activeSelect = false;
				this.sortTitles[2].activeSelect = false;
				this.selectedMenuAid = 1;
				if (this.searchValue === '') {
					uni.showToast({
						title: '请输入搜素关键词',
						icon: 'none'
					})
					this.isShowResult = false;
				} else {
					if (!this.searchHistorys.includes(res.value)) {
						this.searchHistorys.push(res.value);
						this.addSearchHistoryFunc();
					}
					this.getSearchResultsFunc();
				}
			},

			// 添加搜索历史
			addSearchHistoryFunc() {
				const param = {
					searchValue: this.searchValue
				}
				addSearchHistory(param).then(res => {
					this.getsearchHistAndGuessSearchListFunc()
				})
			},

			getSearchResultsFunc() {
				const param = {
					searchKey: this.searchValue,
					selectedMenuAid: this.selectedMenuAid
				}
				getSearchResults(param).then(res => {
					console.log(res);
					this.goods = res.data.data;
					this.isShowResult = true;
				})
			},

			deleteAllSearchHistory() {
				const _this = this;
				uni.showModal({
					title: '确定删除所有搜索历史吗？',
					success(res) {
						if (res.confirm) {
							deleteAllSearchHistory().then(res => {
								if (res.data.code === 10000) {
									_this.searchHistorys = [];
									uni.showToast({
										title: '删除成功！'
									});
								} else {
									uni.showToast({
										title: '删除失败！请稍后再试...'
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户取消');
						}
					}
				});
			},
			// 点击搜索历史标签
			clickSearchHistoryLabel(item) {
				this.searchValue = item.name;
				this.selectedMenuAid = 1;
				this.getSearchResultsFunc();
				this.addSearchHistoryFunc();
			},
			returnPage() {
				uni.navigateBack();
			},
			clickGuessItem(item) {
				// console.log(item);
				this.searchValue = item.name;
				this.selectedMenuAid = 1;
				this.getSearchResultsFunc();
				this.addSearchHistoryFunc();
			},

			// 点击搜索框里面的清空图标
			clearSearchKey() {
				this.searchValue = '';
				this.isShowResult = false;
				this.goods = [];
				this.sortTitles[0].activeSelect = true;
				this.sortTitles[1].activeSelect = false;
				this.sortTitles[2].activeSelect = false;
				this.selectedMenuAid = 1;
			},

			// 点击全部，价格，销量其中一个
			clickMenu(item) {
				// console.log(item);
				this.sortTitles.forEach(obj => {
					obj.activeSelect = false;
				})
				item.activeSelect = true;
				this.selectedMenuAid = item.menuAid
				this.getSearchResultsFunc();
			},

			// 点击搜索历史其中一个的清除图标删除那一个搜索历史
			deleteByHistoryAidFunc(item) {
				const that = this;
				console.log(item);
				uni.showModal({
					title: '提示',
					content: '您确定删除这个搜索记录吗？',
					cancelText: '再想想',
					confirmColor: '#66596b',
					success(res) {
						console.log(res);
						if (res.cancel) {
							console.log("用户点击取消");
						} else if (res.confirm) {
							const param = {
								aid: item.aid
							}
							deleteSearchByAid(param).then(res => {
								console.log(res);
								if (res.data.code === 10000) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									that.getsearchHistAndGuessSearchListFunc();
								} else {
									uni.showToast({
										title: '删除失败!请稍后再试...',
										icon: 'none'
									})
								}
							})
						}

					}
				})
			},

		},



		mounted() {
			// 组件挂载后执行的代码
		}
	};
</script>

<style scoped>
	/* 这里是组件的样式 */
	.shopping_search_main {
		padding: 30rpx;
		padding-top: 60rpx;
	}

	.search_history_view {
		margin-top: 80rpx;
	}

	.search_history_text_delete_icon {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.search_history_text {
		font-size: 18px;
		color: #9d9d9d;
		letter-spacing: 2px;
	}

	.search_history_contain {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 90%;
		margin-top: 20rpx;
	}


	.search_history_per {
		padding: 15rpx;
		border: 1px solid;
		border-color: #afaeb3;
		border-radius: 20rpx;
		margin-right: 25rpx;
		margin-bottom: 25rpx;
		position: relative;
		display: flex;
	}

	.guess_search_main {
		margin-top: 50rpx;
	}

	.guess_per_contain {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.guess_good_img {
		margin-left: 10rpx;
		width: 50rpx;
		height: 30rpx;
	}

	.guess_goods_per {
		width: 46%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.guess_search_text {
		font-size: 18px;
		color: #a6a6a6;
		letter-spacing: 2px;
	}

	.guess_image {
		display: flex;
	}

	.search-result {
		margin-top: 30rpx;
	}

	.result-empty {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.result-empty image {
		width: 300rpx;
		height: 300rpx;
	}

	.text-empty {
		font-size: 25rpx;
		letter-spacing: 2px;
		color: #bebebe;
	}

	.result-top-menu {
		display: flex;
	}

	.result-menu-item {
		margin-left: 40rpx;
		font-size: 32rpx;
	}

	.result {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.result-item {
		margin-bottom: 60rpx;
		display: flex;
		flex-direction: column;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.active-menu {
		font-size: 34rpx;
		font-weight: bold;
		color: #66596b;
	}

	.good-image image {
		width: 300rpx;
		height: 300rpx;
	}

	.good-name {
		font-size: 30rpx;
		margin-top: 10rpx;
		letter-spacing: 1px;

	}

	.good-price {
		font-size: 30rpx;
		font-weight: bold;
		letter-spacing: 2px;
		margin-top: 10rpx;
	}

	.deleteHistory {
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #66596b;
		position: absolute;
		right: -15rpx;
		top: -5rpx;
		z-index: 2;
	}
	
	/* .guess_good_name{
		background-color: #55aaff;
	} */
</style>